<template>
    <div class="son12">
        <h3>SonDemo12</h3>
        <h3>使用纯类型标注来声明触发的事件</h3>
        <p>tle: {{ tle }}</p>
        <p> user: {{ user }}</p>
        <p>msg: {{ msg }}</p>
        <button type="button" @click="editTitle">修改title的值</button>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';


export interface Iuser {
    name: string
    sex: string
    age: number
}

// 使用纯类型标注来声明触发的事件
const emit = defineEmits<{
    (e: 'change', id: number): void
    (e: 'update', value: string): void
    (e: 'edit', val1: string, val2: number): void
    (e: 'editUser', user: Iuser): number
}>()

// 响应式 Props 解构 3.5
const {
    title = '子组件默认的标题',
    user,
    msg
} = defineProps<{
    title?: string
    user: Iuser
    msg?: string
}>()

const tle = ref(title)

const editTitle = () => {
    tle.value = 'son12的新标题'
    emit('editUser', { name: '小王八蛋', sex: '男', age: 22 })
}

</script>

<style lang="scss" scoped>
.son12 {
    border: 3px solid deepskyblue;
    padding: 10px;
    margin: 10px;
}
</style>